{include file="public/header" /}
<style>
    .index-search{
        height: auto !important;
        padding-right: 0.3rem;
    }
    .index-swiepr .swiper{
        height: 11rem;
    }
</style>
<body class="bgc hide-top">
<div class="index-container">
    <img src="/static/index/img/icon6.png" alt="">
    <div class="index-content">
        <div class="pro-list-search index-search">
            <div class="rgt">
                <img src="/static/index/img/icon7.png" alt="">
                <input type="text" placeholder="输入商品关键字搜索" disabled="">
                <p class="flex-center" onclick="load_href('/index/product/search.html',2)">搜索</p>
            </div>
        </div>
        <div class="index-swiepr">
            <div class="swiper">
                <div class="swiper-container carousel">
                    <div class="swiper-wrapper">
                        
                        {foreach name="carousel" item="vo"}
                        <div class="swiper-slide flex-center">
                            <img src="{$vo.images}" alt="">
                        </div>
                        {/foreach}
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>

        <ul class="index-nav">
            {foreach name="cate" item="vo"}
            <li>
                <a href="{:url('product/index')}?cate_1={$vo.id}">
                    <p class="flex-center">
                        <img src="{$vo.icon}" alt="">
                    </p>
                    <p>{$vo.title}</p>
                </a>
            </li>
            {/foreach}
        </ul>

        <div class="index-notice">
            <div class="title"><span>公告</span></div>
            <div class="swiper swiper-nav">
                <div class="swiper-container carousel-nav">
                    <div class="swiper-wrapper">
                        {foreach name="news" item="vo"}
                        <div class="swiper-slide">
                            <p class="single" style="padding-top: .1rem">{$vo.title}</p>
                        </div>
                        {/foreach}
                    </div>
                </div>
            </div>
            <p class="more" onclick="location.href='{:url(\'news/index\')}?types=1'">更多</p>
        </div>

        <!-- <ul class="index-imgs">
            <li class="msg" onclick="location.href='{:url(\'news/index\')}?types=2'">
                <a>
                    <img src="/static/index/img/icon8.png" alt="">
                    <div>
                        <p>新手指南</p>
                        <p class="desc">点击查看新手指南</p>
                    </div>
                </a>
            </li>
            <li class="msg" onclick="location.href='{:url(\'news/index\')}?types=3'">
                <a>
                    <img src="/static/index/img/icon9.png" alt="">
                    <div>
                        <p>常见问题</p>
                        <p class="desc">点击查看常见问题</p>
                    </div>
                </a>
            </li>
            <li></li>
        </ul> -->

        <!-- <div class="index-region">
            <ul class="">
                <li >
                    <a  href="{:url('product/index')}?cate_1=1">
                        <img src="/static/index/img/icon11.png" alt="">
                        <div>
                            <p>报单区</p>
                            <p class="desc">&nbsp;</p>
                            <p class="go">GO ></p>
                        </div>
                    </a>
                </li>
            </ul>
            <ul class="rgt">
                <li>
                    <a href="{:url('product/index')}?cate_1=2">
                        <img src="/static/index/img/icon12.png" alt="">
                        <div>
                            <p>兑换专区</p>
                            <p class="desc">&nbsp;</p>
                            <p class="go">GO ></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="{:url('product/index')}?cate_1=3">
                        <img src="/static/index/img/icon13.png" alt="">
                        <div>
                            <p>燃料积分</p>
                            <p class="desc">&nbsp;</p>
                            <p class="go">GO ></p>
                        </div>
                    </a>
                </li>
            </ul>
        </div> -->

        <div class="index-title">推荐商品</div>

        <div class="tpl_list" style="padding-bottom: 3rem"></div>

        {include file="public/menu" select="1" /}
    </div>
</div>
<script id="template" type="text/html">
    <ul class="index-list ">
        {{# for(var i = 0; i < d.data.length; i++){ }}
        <li>
            <a href="{:url('product/details')}?id={{d.data[i].id}}">
                <p class="flex-center">
                    <img lay-src="{{d.data[i].icon}}" src="{{d.data[i].icon}}" alt="">
                </p>
                <div>
                    <p class="multi">{{d.data[i].title}}</p>
                    <p class="price"><span>{{d.data[i].vip_price}}</span></p>
                </div>
            </a>
        </li>
        {{# } }}
    </ul>
</script>
</body>
{include file="public/footer"/}
<script src="/static/index/js/swiper-bundle.js"></script>
<script>
    $(function () {
        getFlow(1, "{:url('product/getList')}?pick=1");

        new Swiper('.carousel', {
            pagination: {
                el: '.swiper-pagination',
            },
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            loop: true
        });
        new Swiper('.carousel-nav', {
            direction: "vertical",
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            loop: true,
        });
    })
</script>
</html>